<template>
<!-- 育儿知识 -->
<div>
  <div class="submit-box head-line body-cont">
    <AddressCard :addr="addressData" />
    <div class="card-shadow">
      <div class="weui-cell area-box">
        <view class="weui-cell__hd">
          <view class="weui-label">姓名</view>
        </view>
        <view class="weui-cell__bd">
          <input maxlength="50" class="flex-box" name="knowledgeUsername" v-model="knowledgeUsername" type="text" placeholder="请填写姓名">
        </view>
      </div>
    </div>
    <div class="card-shadow">
      <div class="weui-cell area-box">
        <view class="weui-cell__hd">
          <view class="weui-label">联系电话</view>
        </view>
        <view class="weui-cell__bd">
          <input maxlength="50" class="flex-box" name="phone" v-model="phone" type="number" placeholder="请填写联系电话">
        </view>
      </div>
    </div>
    <div class="card-shadow">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <textarea
            class="weui-textarea default-color"
            name="remarks"
            v-model="remarks"
            placeholder="如有其它需求请在此填写备注"
            @input="textareaInput"
            :maxlength="maxlength"/>
          <div class="weui-textarea-counter">{{nowLength}}/{{maxlength}}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="btn-box">
    <view class="btn-full" :loading="isSubmit" @tap="submit" >确定报名</view>
  </div>
</div>
</template>
<script>
import saveOrder from '@/interface/order/saveOrder'
import valid from '@/utils/valid'
import {serviceTypeData} from '@/config'
import payFun from '@/utils/pay'

export default {
  components: { },
  data () {
    return {
      addressData: {},
      isSubmit: false,
      knowledgeUsername: '',
      phone: '',
      remarks: '',
      nowLength: 0,
      maxlength: 50,
    }
  },
  computed: {
  },
  methods: {
    textareaInput (e) {
      this.nowLength = e.mp.detail.value.length
    },
    submit () {
      if (!this.knowledgeUsername) {
        this.dialog.showToast('请填写姓名')
        return false
      }
      if (!valid.isPhone(this.phone)) { return }
      this.isSubmit = true
      const query = this.$root.$mp.query
      saveOrder({
        serviceType: serviceTypeData.yezs,
        phone: this.phone,
        knowledgeId: query.knowledgeId, // 育儿知识ID
        orderPrice: query.orderPrice, // 育儿知识价格
        knowledgeUsername: this.knowledgeUsername,
        remarks: this.remarks
      }).then(data => {
        if(query.orderPrice > 0){
          payFun({ orderNo: data.orderNo }, () => {
            const orderStatus = 1;
            this.goStatusPage('success', '支付', orderStatus)
          }, () => {
            const orderStatus = 0;
            this.goStatusPage('error', '支付', orderStatus)
          })
        }else{
          this.goStatusPage('success', '报名')
        }
      }).catch(msg => this.dialog.showToast(msg || '保存失败'))
        .finally(() => { this.isSubmit = false })
    }
  },
  beforeMount () {
    this.checkLogin()
  },
  mounted () {

  }
}
</script>
<style lang="less">
page {
  background-color: #f9f9f9;
}
.body-cont {
  padding-top: 60upx;
}
</style>